<template>
  <el-dialog append-to-body class="common_dialog_in" custom-class="reset-dialog-width" :visible.sync="visible" title="查看智能柜" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="btn_group">
      <el-button type="primary" size="mini" @click="addCabinetList()">新增配送柜</el-button>
      <el-button type="primary" size="mini" @click="addShuweiCabinetList()">新增数微便民柜</el-button>
    </div>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="配送柜列表" name="1">
        <CaninetList v-if="visible" ref="CaninetList" :searchItem="true" :listBorder="true" :qPCabinetGroupNo="cabinetGroupNo" :regionId="regionId"></CaninetList>
      </el-tab-pane>
      <el-tab-pane label="数微便民柜" name="2">
        <shuweiCabinetList v-if="visible" ref="ShuweiCaninetList" :searchItem="true" :listBorder="true" :qPCabinetGroupNo="cabinetGroupNo" :regionId="regionId"></shuweiCabinetList>
      </el-tab-pane>
    </el-tabs>
    <ListCabinetChoose v-if="listCabinetChooseVisible" @refreshDataList="getCabinetList" ref="listCabinetChoose"></ListCabinetChoose> 
    <ListShuweiCabinetChoose v-if="listShuweiCabinetChooseVisible" @refreshDataList="getShuweiCabinetList" ref="listShuweiCabinetChoose"></ListShuweiCabinetChoose> 
    <template slot="footer">
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import CaninetList from './caninetList.vue'  //配送柜列表组件
import ShuweiCabinetList from './shuweiCabinetList.vue'  //数微配送柜列表组件
import ListCabinetChoose from './listCabinet-choose'  //新增选择智能柜
import ListShuweiCabinetChoose from './listShuweiCabinet-choose'  //新增选择智能柜
export default {
  data() {
    return {
      visible: false,
      cabinetGroupNo:'', //柜组编号
      regionId:'', //区域id
      listCabinetChooseVisible:false, // 选择智能柜弹窗展示
      listShuweiCabinetChooseVisible:false, // 选择数微智能柜弹窗展示
      activeName:'1', //tab标签页展示 1:配送柜列表 2:数微便民柜
    }
  },
  computed: {
  },
  components: {
    ListCabinetChoose,  ////新增选择智能柜
    ListShuweiCabinetChoose,  ////新增数微选择智能柜
    CaninetList, //配送柜列表组件
    ShuweiCabinetList, //数微配送柜列表组件
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.activeName="1"
        this.$refs['CaninetList'].getDataList()
        this.$refs['ShuweiCaninetList'].getDataList()
      })
    },
    // 点击新增配送柜
    addCabinetList(){
      this.listCabinetChooseVisible = true 
      this.$nextTick(() => {
        this.$refs.listCabinetChoose.cabinetGroupNo= this.cabinetGroupNo
        this.$refs.listCabinetChoose.regionId= this.regionId
        this.$refs.listCabinetChoose.init()
      })
    },
    // 点击新增数微配送柜
    addShuweiCabinetList(){
      this.listShuweiCabinetChooseVisible = true 
      this.$nextTick(() => {
        this.$refs.listShuweiCabinetChoose.cabinetGroupNo= this.cabinetGroupNo
        this.$refs.listShuweiCabinetChoose.regionId= this.regionId
        this.$refs.listShuweiCabinetChoose.init()
      })
    },
    // 刷新配送柜列表
    getCabinetList(){
      this.activeName="1"
      this.$refs['CaninetList'].getDataList()
    },
    // 刷新数微配送柜列表
    getShuweiCabinetList(){
      this.activeName="2"
      this.$refs['ShuweiCaninetList'].getDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
.common_dialog_in {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep.el-dialog {
    margin: 0 auto !important;
    max-height: 1000px;

    .el-dialog__body {
      overflow: hidden;
      overflow-y: auto;
      max-height: 800px;
    }
  }
  .btn_group{
    margin-bottom: 10px;
  }
}
</style>
